<template>
    <a-modal
        title="拍照上传"
        width="80%"
        :visible="visible"
        switchFullscreen
        @cancel="handleCancel"
        :dialog-style="{ top: '5px'}"
    >
        <div class="webCam">
            <a-row>
                <a-col :md="12" :xs="24">
                    <div id="my_camera" class="crmera" ></div>
                    <a-button @click="takeSnapshot" type="primary" >拍照</a-button>
                </a-col>
                <a-col :md="12" :xs="24">
                    <div id="results" class="results">
                        Your captured image will appear here...
                    </div>
                </a-col>
            </a-row>
        </div>
    </a-modal>
</template>

<script>


import { getAction } from '@api/manage'
import Webcam from "webcamjs";
export default {
    name: "webcam",
    data() {
        return {
            visible: false,
            disableSubmit: false
        }
    },
    created() {
        console.log('jinlailezhegezujian....',document.getElementById("#my_camera"))
    },
    mounted() {
        Webcam.set({
            width: 500, // 拍照窗口的宽度
            height: 500, // 拍照窗口的高度
            dest_width: 500,// 生成照片的宽度
            dest_height: 500,// 生成照片的高度
            image_format: 'jpeg',
            jpeg_quality: 90,
            constraints: {
                width: { exact: 2592 },
                height: { exact: 1944 }
            }
        });
        Webcam.attach( "#my_camera" );
    },
    methods: {
        takeSnapshot() {
            // take snapshot and get image data
            Webcam.snap( function(data_uri) {
                console.log('data_uri==>',data_uri)
                // display results in page
                document.getElementById('results').innerHTML =
                    '<h2>Here is your large image:</h2>' +
                    '<img src="'+ data_uri +'"/>';
            } );
        },
        async showWebCam() {
            this.visible = true;
        },

        close() {
            this.$emit('close')
            this.visible = false
        },
        handleOk() {
            this.close()
        },
        handleCancel() {
            this.close()
        },
        handleEdit(){

        },
    }

}
</script>

<style lang="less" scoped>
.crmera{
    width: 500px;
    height: 500px;
    border: 1px white dashed;
    margin-bottom: 20px;
}
.results{
    width: 500px;
    height: 500px;
    border: 1px white dashed;
    margin-bottom: 20px;
}
.bg-theme15{
    .crmera{
        border: 1px #cccccc solid;
    }

    .results {
        border: 1px #cccccc solid;
    }
}

</style>